آموزش React Front to Back 2022 [ویدئو]

React Front to Back 2022 [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: این دوره با اصول React شامل کامپوننت ها، پایه ها، هوک ها، حالت و غیره شروع می شود. سپس با قلاب های React مانند useState، useEffect، useContext، useReducer و useRef آشنا شوید. بعد، قلاب های سفارشی ایجاد می کنید و React Router v6 را مشاهده می کنید. سپس، یاد خواهید گرفت که چگونه وضعیت جهانی را با زمینه، کاهنده ها و قلاب ها مدیریت کنید. شما احراز هویت Firebase 9، پرس و جوها، ذخیره سازی و استقرار برنامه های React را در Vercel و Netlify خواهید دید. انیمیشن اولیه با Framer Motion، پیاده سازی نقشه های Leaflet و اسلایدرهای Swiper و کار بر روی تمام پشته MERN (MongoDB، Express، React، Node.js) از نکات برجسته این دوره است. تمام این مفاهیم با کمک چهار برنامه/پروژه مختلف به صورت عملی توضیح داده شده اند. اگر قبلا از React استفاده نکرده‌اید، پروژه Feedback App به شما کمک می‌کند تا اصول React را بیاموزید. پروژه GitHub Finder با معرفی اقدامات و کاهش دهنده ها، مدیریت وضعیت سطح برنامه را بیشتر بررسی می کند. شما با API های شخص ثالث کار خواهید کرد. اپلیکیشن House Marketplace شما را با Firebase آشنا می‌کند و شما را آماده می‌کند تا اطلاعات زیادی در مورد قابلیت‌های آن به‌عنوان پلتفرمی برای احراز هویت کاربر، ذخیره‌سازی فایل‌های ابری و پایگاه داده اختصاصی NoSQL بیاموزید. در نهایت، پروژه نهایی (فول استک سیستم بلیط پشتیبانی MERN) یک برنامه تمام عیار کامل است که از Redux و Redux Toolkit استفاده می کند. در پایان دوره، شما چهار پروژه با تمام مفاهیم آموزش داده شده ساخته اید. همچنین اعتماد به نفس و مهارت کافی برای شروع سفر خود را با React به دست خواهید آورد. همه فایل‌های منبع به مخزن GitHub در آدرس زیر اضافه می‌شوند: https://github.com/packtpublishing/react-front-to-back آموزش اصول React از جمله کامپوننت‌ها، قطعات، قلاب‌ها، وضعیت قلاب های React و نحوه ایجاد قلاب های سفارشی را بیاموزید وضعیت جهانی را با زمینه، کاهنده ها و قلاب ها مدیریت کنید نحوه استفاده از زمینه و کاهش دهنده ها برای مدیریت وضعیت جهانی را بیاموزید به احراز هویت Firebase 9 و انیمیشن اولیه با Framer Motion نگاه کنید استقرار برنامه‌های React در Vercel و Netlify این دوره برای کسانی است که می‌خواهند React را از ابتدا یاد بگیرند و توسعه‌دهنده React شوند. افرادی که می خواهند مهارت های خود را به عنوان یک توسعه دهنده React تقویت کنند یا به دنبال افزایش مهارت های خود به عنوان یک توسعه دهنده فرانت اند هستند نیز از این دوره بهره مند خواهند شد. شما باید قبل از یادگیری React یا هر فریم ورکی از جاوا اسکریپت در سطح متوسط ​​دانش داشته باشید زیرا برخی از مفاهیم پیشرفته جاوا اسکریپت در اینجا استفاده می شوند. React مدرن را با ساخت 4 پروژه و مناسب برای توسعه دهندگان React مبتدی و متوسط ​​بیاموزید * با React و Firebase 9 یک بازار خانه بسازید * با Redux Toolkit یک سیستم بلیط پشتیبانی MERN کامل بسازید.

سرفصل ها و درس ها

مقدمه دوره Introduction to the Course

  • به دوره خوش آمدید Welcome to the Course

  • React چیست What is React

  • راه اندازی محیط Environment Setup

  • مخازن کد Code Repos

React Basics و JSX (JavaScript XML) React Basics and JSX (JavaScript XML)

  • مقدمه ای بر پروژه بازخورد Introduction to Feedback Project

  • برنامه React ایجاد کنید Create React App

  • راه اندازی React Initializing React

  • معرفی JSX Intro to JSX

  • مقادیر و لیست های پویا در JSX Dynamic Values and Lists in JSX

  • شرایط در JSX Conditionals in JSX

اجزاء، لوازم، و حالت Components, Props, and State

  • ایجاد اولین مؤلفه و لوازم جانبی شما Creating Your First Component and Props

  • اضافه کردن سبک به یک کامپوننت Adding Styles to a Component

  • حالت و استفاده ازState Hook State and useState Hook

  • مدیریت دولت جهانی Managing Global State

  • اجزای کارت و سبک های شرطی Card Component and Conditional Styles

  • رویدادها و حفاری پایه Events and Prop Drilling

  • مولفه و واکنش پذیری آمار بازخورد Feedback Stats Component and Reactivity

فرم ها، اعتبارسنجی، و انیمیشن ساده Forms, Validation, and Simple Animation

  • ورودی و حالت فرم Form Input and State

  • کامپوننت دکمه سفارشی Custom Button Component

  • اعتبار سنجی بلادرنگ Real-Time Validation

  • رتبه بندی جزء را انتخاب کنید Rating Select Component

  • افزودن بازخورد Add Feedback

  • انیمیشن محو شدن با حرکت فریم Fade Animation with Framer Motion

ایجاد مسیرها و پیوندها Creating Routes and Links

  • ایجاد مسیرها (React Router 5) Creating Routes (React Router 5)

  • ارتقا به React Router 6 Upgrading to React Router 6

  • ایجاد لینک (v5 و v6) Creating Links (v5 and v6)

  • NavLink و useParams NavLink and useParams

  • مسیریابی و مسیرهای تودرتو Navigate and Nested Routes

Context API، useContext Hook و Deployment Context API, useContext Hook, and Deployment

  • یک زمینه و ارائه دهنده ایجاد کنید Create a Context and Provider

  • وضعیت جهانی را با useContext Hook دریافت کنید Get Global State with the useContext Hook

  • انتقال توابع به متن Moving Functions to Context

  • ویرایش رویداد بازخورد Edit Feedback Event

  • عوارض جانبی با useEffect Side Effects with useEffect

  • به روز رسانی مورد بازخورد Update Feedback Item

  • در Netlify مستقر شوید Deploy to Netlify

API ها و درخواست های HTTP APIs and HTTP Requests

  • API ها و درخواست ها توضیح داده شده است APIs and Requests Explained

  • راه اندازی JSON-Server Mock Backend Setting Up JSON-Server Mock Backend

  • کلاینت و سرور را همزمان اجرا کنید Run Client and Server with Concurrently

  • واکشی داده ها از JSON-Server Backend Fetch Data from JSON-Server Backend

  • جزء اسپینر Spinner Component

  • افزودن بازخورد و تنظیم یک پروکسی Add Feedback and Setting a Proxy

  • به روز رسانی و حذف از JSON-Server Update and Delete from JSON-Server

شروع پروژه GitHub Finder GitHub Finder Project Start

  • معرفی پروژه GitHub Finder Introduction to GitHub Finder Project

  • Tailwind و Daisy UI را تنظیم کنید Set Up Tailwind and Daisy UI

  • کامپوننت نوار ناوبری Navbar Component

  • کامپوننت پاورقی Footer Component

  • صفحات و مسیرها Pages and Routes

کار با GitHub API Working with the GitHub API

  • GitHub API و Getting Token GitHub API and Getting Token

  • جزء User List UserList Component

  • در حال بارگذاری اسپینر Loading Spinner

  • نمایش کاربران Display Users

  • متن GitHub را تنظیم کنید Set Up GitHub Context

  • کاهش دهنده ها و استفاده از Reducer Hook Reducers and useReducer Hook

  • پاک کردن واکشی کاربران Clean Up Fetch Users

  • جزء جستجوی کاربر User Search Component

  • جستجوی کاربران Search Users

  • پاک کردن کاربران Clear Users

نمایه کاربر و هشدارها User Profile and Alerts

  • زمینه هشدار و کاهش دهنده Alert Context and Reducer

  • مؤلفه هشدار Alert Component

  • دریافت کاربر مجرد Get Single User

  • نمایه کاربر بالا User Profile Top

  • آمار نمایه کاربر User Profile Stats

  • Repos کاربر را دریافت کنید Get User Repos

  • اقلام مخزن Repo Items

Refactoring زمینه و اقدامات Refactoring Context and Actions

  • SearchUsers را به فایل Actions منتقل کنید Move SearchUsers to Actions File

  • getUser را به فایل Actions منتقل کنید Move getUser to Actions File

  • پاکسازی اقدامات و Axios ما Cleaning Up Our Actions and Axios

  • به Vercel مستقر شوید Deploy to Vercel

قلاب‌های واکنش پیشرفته‌تر More Advanced React Hooks

  • معرفی بخش Introduction to Section

  • useRef مثال 1 - ایجاد مرجع DOM useRef Example 1 - Create DOM Reference

  • useRef مثال 2 - وضعیت قبلی را دریافت کنید useRef Example 2 - Get Previous State

  • useRef مثال 3 - رفع خطای نشت حافظه useRef Example 3 - Memory Leak Error Fix

  • useMemo مثال useMemo Example

  • استفاده از Callback مثال useCallback Example

  • قلاب سفارشی 1 - useFetch Custom Hook 1 - useFetch

  • هوک سفارشی 2 - استفاده ازLocalStorage Custom Hook 2 - useLocalStorage

شروع پروژه هاوس مارکت House Marketplace Project Start

  • معرفی پروژه هاوس مارکت Introduction to House Marketplace Project

  • راه اندازی برنامه و Firebase App and Firebase Setup

  • احراز هویت و ایجاد قوانین را فعال کنید Enable Authentication and Create Rules

  • داده ها و شاخص های ساختگی Dummy Data and Indexes

  • صفحات و مسیرها Pages and Routes

  • کامپوننت نوار ناوبری Navbar Component

احراز هویت و نمایه Firebase Firebase Authentication and Profile

  • فرم های ورود و ثبت نام Sign In and Sign-Up Forms

  • ثبت نام کاربر Register User

  • ذخیره کاربر در Firestore Save User to Firestore

  • ورود کاربر User Sign In

  • هشدار با React Toastify Alerts with React Toastify

  • خروج کاربر User Logout

  • نمایش و به روز رسانی جزئیات کاربر Display and Update User Details

  • کامپوننت PrivateRoute و استفاده از قلابAuthStatus PrivateRoute Component and useAuthStatus Hook

  • صفحه رمز عبور را فراموش کرده اید Forgot Password Page

  • Google OAuth Google OAuth

دریافت و ایجاد لیست Get and Create Listings

  • کاوش صفحه Explore Page

  • واکشی لیست ها از Firebase Fetch Listings from Firebase

  • جزء مورد فهرست Listing Item Component

  • صفحه پیشنهادات Offers Page

  • ایجاد صفحه فهرست را شروع کنید Start Create Listing Page

  • ایجاد فرم لیست Create Listing Form

  • Coords را با Geocoding API دریافت کنید Get Coords with Geocoding API

  • آپلود تصاویر در Firebase Uploading Images to Firebase

  • لیست ها را در Firestore ذخیره کنید Save Listings to Firestore

  • یادداشت سریع و تغییر Quick Note and Change

لیست های تک، نقشه، لغزنده، و ویرایش Single Listings, Map, Slider, and Edit

  • واکشی فهرست واحد Fetch Single Listing

  • جزئیات لیست Listing Details

  • با صفحه صاحبخانه تماس بگیرید Contact Landlord Page

  • نقشه بروشور Leaflet Map

  • لغزان صفحه لیست ها Listings Page Slider

  • اسلایدر را کاوش کنید Explore Slider

  • لیست پروفایل و حذف Profile Listings and Delete

  • بارگذاری صفحه بندی بیشتر Load More Pagination

  • ویرایش نماد فهرست Edit Listing Icon

  • ویرایش فهرست Edit Listing

  • پاک کردن هشدارهای کنسول Clear Up Console Warnings

  • به Vercel مستقر شوید Deploy to Vercel

شروع پروژه MERN، API، و احراز هویت Backend MERN Project Start, API, and Backend Authentication

  • مقدمه ای بر پروژه Introduction to Project

  • پشته MERN چیست؟ What Is the MERN Stack?

  • راه اندازی MongoDB MongoDB Setup

  • ساختار فایل سرور Server File Structure

  • راه اندازی اولیه سرور اکسپرس Basic Express Server Setup

  • مسیرها و کنترلر را اضافه کنید Add Routes and Controller

  • رسیدگی به خطا و استثنا Error and Exception Handling

  • به پایگاه داده متصل شوید Connect to the Database

  • ثبت نام کاربر Register User

  • وارد شوید و JWT ایجاد کنید Login and Create JWT

  • از مسیرها و احراز هویت محافظت کنید Protect Routes and Authentication

احراز هویت Front-End Front-End Authentication

  • راه اندازی پوشه Front-End Front-End Folder Setup

  • هدر و صفحات اولیه Header and Initial Pages

  • صفحه اصلی، ورود و ثبت نام UI Home, Login, and Register UI

  • تنظیم Redux و Auth Slice Redux Setup and Auth Slice

  • فرم ثبت نام هوک به Redux Hook Register Form to Redux

  • ثبت نام کاربر Register User

  • خروج کاربر Logout User

  • ورود کاربر User Login

عملکرد بلیط Tickets Functionality

  • مدل بلیط و مسیرها Ticket Model and Routes

  • دریافت و ایجاد بلیط (بکاند) Get and Create Tickets (Backend)

  • بلیط تک، به روز رسانی و حذف (پشت زمینه) Single Ticket, Update, and Delete (Backend)

  • نگهبان مسیر Route Guard

  • فرم جدید بلیط New Ticket Form

  • بلیط را به Redux اضافه کنید Add Tickets to Redux

  • ایجاد عملکرد بلیط Create Ticket Functionality

  • واکشی بلیط از Backend Fetch Tickets from Backend

  • لیست بلیط ها در UI Listing Tickets in UI

  • نمایش تک بلیط Single Ticket Display

  • عملکرد بلیط Ticket Functionality

یادداشت ها عملکرد و استقرار Notes Functionality and Deploy

  • پشتیبان یادداشت ها Notes Backend

  • واکشی یادداشت ها از طریق Redux Fetch Notes through Redux

  • نمایش یادداشت ها Display Notes

  • توجه داشته باشید فرم مدال Note Form Modal

  • یک یادداشت ارسال کنید Submit a Note

  • به هروکو مستقر شوید Deploy to Heroku

نمایش نظرات

آموزش React Front to Back 2022 [ویدئو]
جزییات دوره
20 h 3 m
150
Packtpub Packtpub
(آخرین آپدیت)
از 5
ندارد
دارد
دارد
Brad Traversy
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Brad Traversy Brad Traversy

توسعه دهنده وب Full Stack و مدرس در Traversy Media